<template>
  <div class="a">
    <Headers :graphic="graphic" />
    <div class="brief">
      <div class="title">通知公告</div>
      <div class="title-bom"></div>
      <div class="more">更多</div>
      <div class="card">
        <div class="card-item" v-for="item in 4" :key="item">
          <div class="item-left">
            <div class="data">10.28</div>
            <div class="year">2021</div>
          </div>
          <div class="item-right">
            <div class="tit">2022年“申请-考核”制博士研究生招生公告</div>
            <div class="article">
              2022年，我院非军事学学科博士研究生继续实行“申请-考核”
              制招生，军事学学科采取普通招考方式招生
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="brief" v-for="item in 4" :key="item">
      <div class="title">学术报告</div>
      <div class="title-bom"></div>
      <div class="more">更多</div>
      <div class="card">
        <div class="card-item" v-for="item in 4" :key="item">
          <div class="item-left">
           <img src="@/assets/imgs/l.png" alt=""/>
          </div>
          <div class="item-right">
            <div class="tit">2022年“申请-考核”制博士研究生招生公告</div>
            <div class="article">
              2022年，我院非军事学学科博士研究生继续实行“申请-考核”
              制招生，军事学学科采取普通招考方式招生
            </div>
          </div>
        </div>
      </div>
    </div>
    <Bottom  style="margin-top:237px
    "/>
    <Topnav />
  </div>
</template>

<script>
import Topnav from "@/components/topnav.vue";
import Bottom from "@/components/bottom.vue";
import Headers from "@/components/headers.vue";

export default {
  name: "",
  data() {
    return {
      graphic: {
        title: "院部概况",
        imgherf: "@/assets/imgs/background2.png",
        text: "新的军事科学院学科布局从原有的军事学扩展到理、工、农、医、管、军等多个门类，形成了理论与技术相互融合支撑的全新发展格局。",
      },
    };
  },
  components: {
    Topnav,
    Bottom,
    Headers,
  },
  methods: {},
};
</script>


<style lang="less" scoped>
.title {
  font-weight: 700;
  color: #333333;
  font-size: 48px;
  margin-bottom: 15px;
}
.title-bom {
  width: 111px;
  height: 8px;
  background-color: #b21315;
  border-radius: 8px;
  margin-bottom: 40px;
}
.brief {
  padding: 95px 160px 150px;
  height: 600px;
  margin-top: 60px;
  .more {
    font-weight: 700;
    color: #b21315;
    font-size: 18px;
    text-align: right;
    margin-bottom: 10px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card-item {
      display: flex;
      padding: 40px 88px 0 44px;
      width: 49%;
      margin-bottom: 15px;
      height: 200px;
      border-radius: 5px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      .item-left {
        margin-right: 20px;
        text-align: center;
        width: 260px;
        height: 110px;
        background-color: rgba(#b21315, 0.3);
        border-radius: 5px;
        .data {
          font-weight: 700;
          color: #b21315;
          font-size: 42px;
          margin-top: 13px;
        }
        .year {
          color: #b21315;
          font-size: 28px;
        }
      }
      .item-right {
        width: 446px;
        .tit {
          font-weight: 700;
          color: #333333;
          font-size: 20px;
          margin-bottom: 15px;
        }
        .article {
          color: #666666;
          font-size: 16px;
        }
      }
    }
  }
}
</style>